<template>
  <el-form ref="form" :model="form" :rules="rules" label-width="80px">
    <el-form-item label="手机号码" prop="phone">
      <el-input v-model="form.phone" maxlength="11" />
    </el-form-item>
    <el-form-item label="验证码" prop="code">
      <el-input
        v-model="form.code"
        placeholder="请输入验证码"
        max="6"
        clearable
        style="width: calc(100% - 120px)"
      />
      <el-button
        @click="sendCodeFunc"
        :loading="loading"
        :disabled="codeTime > 0"
        plain
        type="primary"
        style="float: right"
      >
        {{ getButtonTxt }}
      </el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="submit">保存</el-button>
      <el-button type="danger" size="mini" @click="close">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import user from "@/api/systemManagement/user/index";

export default {
  name: "resetPhone",
  props: {
    user: {
      type: Object
    }
  },
  data() {
    return {
      loading: false,
      codeTime: 0,
      isSendCode: false,
      form: {
        phone: this.user.phone,
        code: undefined
      },
      // 表单校验
      rules: {
        phone: [
          { required: true, message: "手机号码不能为空", trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur"
          }
        ],
        code: [{ required: true, message: "验证码不能为空", trigger: "blur" }]
      }
    };
  },
  computed: {
    getButtonTxt() {
      if (this.codeTime) {
        return this.codeTime + " S";
      } else if (this.loading) {
        return "发送中";
      } else if (this.isSendCode) {
        return "重新发送";
      } else {
        return "发送验证码";
      }
    }
  },
  methods: {
    sendCodeFunc() {
      this.$refs["form"].validateField("phone", valid => {
        if (valid == "") {
          this.loading = true;
          user
            .smscode(this.form.phone)
            .then(() => {
              this.msgSuccess("发送成功!");
              //发送验证码
              this.isSendCode = true;
              //时间开始
              this.codeTime = 60;
              //定时器
              const time = () =>
                setTimeout(() => {
                  this.codeTime -= 1;
                  if (this.codeTime !== 0) {
                    time();
                  }
                }, 1000);
              //执行定时器
              time();
              //发送完毕
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          user.changePhone(this.form).then(() => {
            this.msgSuccess("修改成功!");
          });
        }
      });
    },
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/" });
    }
  }
};
</script>
